<template>
  <div id="header">
	<!-- pc header start -->
	<div class="pc-header after-clear">
	  <h1 class="logo"><a href="index.html"><img src="./../../assets/images/logo.png" class="pc-logo" /><img src="./../../assets/images/mobile/logo.png" class="m-logo"/></a></h1>
	  <div class="rightBox">
	    <ul class="mainNav after-clear">
	        <li><router-link to="/home">首页</router-link></li>
	        <li><a href="hotel-list.html?countryCode=CN">国内酒店</a></li>
	        <li>
	        	<a :class="{cur: PcHotelsMenu}"
	        		@mouseover="pchotelsMenuOpen"
	        		href="javascript:">
	        		国际酒店
	        	</a>
	        </li>
	        <li><router-link to="/club">会员俱乐部</router-link></li>
	        <li><router-link to="/activity">优惠活动</router-link></li>
	        <li><router-link to="/about">品牌故事</router-link></li>
	    </ul>
	    <div class="telBox">
	      <p class="tel">4001 203276</p>
	      <div class="bBox clx">
	        <a href="https://booking.slh.com/managereservation?" target="_blank">预订查询</a>
	        <span>|</span>
	        <a href="http://www.slh.com" target="_blank">English</a>
	      </div>
	    </div>
	    <div class="search-nav">
	        <div class="search-nav-cont">
	          <span class="icon-search"></span>  
	        </div>
	        <div class="search-box cxl">
	          <div class="search-box-inner">
	            <div class="search-bar"><input type="text" placeholder="请输入您要入住的国家、城市或酒店名称"></div>
	            <div class="search-result">
	              <div class="item item-empty text-center">
	                <p>没有符合<em>多少分多少</em>的结果</p>
	                <p>请重新搜索</p>
	              </div>
	              <div class="item">
	                <h3>国家</h3>
	                <ul class="list">
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                </ul>
	              </div>
	              <div class="item">
	                <h3>国家</h3>
	                <ul class="list">
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                  <li class="list-item"><a href="hotel-list.html?countryCode=CN">大中华区</a><span>共 <em>13</em> 家酒店</span></li>
	                </ul>
	              </div>
	            </div>
	          </div>
	        </div>
	    </div>
	    <a href="javascript:"
	    	class="smallTopNav"
	    	v-show="!MobileMenuOpen"
	    	@click="openMobileMenu">
	    	<span></span><span></span><span></span>
	    </a>
	    <a href="javascript:" class="smallClose rotateIn animated"
	    	v-show="MobileMenuOpen"
	    	@click="openMobileMenu">close</a>
	    <!-- <a href="javascript:" class="smallClose rotateIn animated" id="J_CloseMobleNav">close</a> -->
	  </div>
	  <div class="sub_nav after-clear" 
	  	v-show="PcHotelsMenu"
	  	@mouseleave="pchotelsMenuClose">
	    <div class="europe item w240">
	      <h4><a href="#">欧洲</a></h4>
	      <div class="destContent" id="overseaContinent_Europe">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Europe">{{item.countryName}}</a>
	      </div>
	    </div>
	    <div class="Asian item w120">
	      <h4><a href="#">亚洲</a></h4>
	      <div class="destContent" id="overseaContinent_Asia">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Asian">{{item.countryName}}</a>
	      </div>
	    </div>
	    <div class="Indian item w120">
	      <h4><a href="#">印度洋</a></h4>
	      <div class="destContent" id="overseaContinent_IndianOcean">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in IndianOcean">{{item.countryName}}</a>
	      </div>
	      <div class="blank20"></div>
	      <h4><a href="#">大洋洲</a></h4>
	      <div class="destContent" id="overseaContinent_Australasia">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Australasia">{{item.countryName}}</a>
	      </div>
	    </div>
	    <div class="America item w120">
	      <h4><a href="#">美洲</a></h4>
	      <div class="destContent" id="overseaContinent_Americas">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Americas">{{item.countryName}}</a>
	      </div>
	    </div>
	    <div class="CARIBBEAN item w120">
	      <h4><a href="#">加勒比海地区</a></h4>
	      <div class="destContent" id="overseaContinent_Caribbean">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Caribbean">{{item.countryName}}</a>
	      </div>
	    </div>
	    <div class="Africa item w120">
	      <h4><a href="#">非洲</a></h4>
	      <div class="destContent" id="overseaContinent_Africa">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in Africa">{{item.countryName}}</a>
	      </div>
	      <div class="blank20"></div>
	      <h4><a href="#">中东</a></h4>
	      <div class="destContent" id="overseaContinent_MiddleEast">
	      	<div class="inline-loading" v-show="!LXRequred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<a :href="'#/hotelList/' + item.countryCode" v-for="item in MiddleEast">{{item.countryName}}</a>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- pc header end -->
	<!-- mobile nav start -->
	<div class="mobile-nav" :class="{ show: MobileMenuOpen }">
	  <ul class="navList ">
        <li>
        	<router-link to="/home">
        		<i class="home"></i><span class="nav-name">首页</span><em></em>
        	</router-link>
        </li>
        <li>
        	<router-link to="/home">
        		<i class="gn"></i><span class="nav-name">国内酒店</span><em></em>
        	</router-link>
        </li>
        <li>
        	<a :class="{cur: PcHotelsMenu}"
        		@click="mobilehotelsMenuOpen"
        		href="javascript:">
        		<i class="gj"></i><span class="nav-name">国际酒店</span><em></em>
        	</a>
        </li>
        <li>
        	<router-link to="/club">
        		<i class="hy"></i><span class="nav-name">会员俱乐部</span><em></em>
        	</router-link>
        </li>
        <li>
        	<router-link to="/activity">
        		<i class="yh"></i><span class="nav-name">优惠活动</span><em></em>
        	</router-link>
        </li>
        <li>
        	<router-link to="/about">
        		<i class="pp"></i><span class="nav-name">品牌故事</span><em></em>
        	</router-link>
        </li>
        <li>
        	<router-link to="/about">
        		<i class="en"></i><span class="nav-name">English</span><em></em>
        	</router-link>
        </li>
	  </ul>
	</div>
	<!-- mobile nav end -->

	<!-- mobile search start -->
	<div class="mobile-search" id="mobile-search">
	  <div class="search-header">
	    <div class="header-content">
	      <button class="btn btn-back"></button>
	      <div class="search-box">
	        <input class="ipt" id="m_search-hotel" type="text" placeholder="请输入国家 、城市 或 酒店名称">
	        <button class="btn btn-search"></button>
	      </div>
	      <button class="btn btn-cancel">取消</button>
	    </div>
	  </div>
	  <div class="search-content">
	    <div class="content-area after-clear">
	      <ul class="area-menu">
	        <li><a class="here" href="#">热门</a></li>
	        <li><a href="#">国内</a></li>
	        <li><a href="#">亚洲</a></li>
	        <li><a href="#">美洲</a></li>
	        <li><a href="#">欧洲</a></li>
	        <li><a href="#">大洋洲</a></li>
	        <li><a href="#">非洲</a></li>
	        <li><a href="#">其他</a></li>
	      </ul>
	      <ul class="area-content">
	        <li class="item item-show after-clear">
	          <dl>
	            <dt>热门城市</dt>
	            <dd class="after-clear" id="m_hotsite_city_searchbar">
	                <!-- <a href="hotel-list.html?countryCode=AT&amp;cityCode=Fiss">费斯</a> -->
	            </dd>
	            <dl>
	              <dt>热门国家</dt>
	              <dd class="after-clear" id="m_hotsite_country_searchbar"></dd>
	            </dl>
	          </dl>
	        </li>
	        <li class="item after-clear" id="m_searchCity_domestic"></li>
	        <li class="item after-clear" id="m_searchContinent_Asia"></li>
	        <li class="item after-clear" id="m_searchContinent_Americas"></li>
	        <li class="item after-clear" id="m_searchContinent_Europe"></li>
	        <li class="item after-clear" id="m_searchContinent_Australasia"></li>
	        <li class="item after-clear" id="m_searchContinent_Africa"></li>
	        <li class="item after-clear">
	            <dl>
	                <dt>印度洋</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_IndianOcean"></div>
	            <dl>
	                <dt>加勒比海地区</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_Caribbean"></div>
	            <dl>
	                <dt>中东</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_MiddleEast"></div>
	        </li>
	      </ul>
	    </div>
	    <div class="content-search">
	      <div class="item item-empty text-center">
	        <p>没有符合<em>多少分多少</em>的结果</p>
	        <p>请重新搜索</p>
	      </div>
	      <div class="item">
	        <h3>国家</h3>
	        <ul class="list">
	          <li class="list-item"><a class="ub-f1" href="hotel-list.html?countryCode=CN">中国</a><span>10家酒店</span></li>
	          <li class="list-item"><a class="ub-f1" href="hotel-list.html?countryCode=CN">中国</a><span>10家酒店</span></li>
	          <li class="list-item"><a class="ub-f1" href="hotel-list.html?countryCode=CN">中国</a><span>10家酒店</span></li>
	        </ul>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- mobile search end -->

	<!--全部城市-->
	<section class='area-hotel content-area'
		:class="{ show: MobileHotelsMenu }">
	  <div class="area-hotel-inner">
	    <ul class="area-menu">
	      <li><a class="here" href="#">热门</a></li>
	      <li><a href="#">国内</a></li>
	      <li><a href="#">亚洲</a></li>
	      <li><a href="#">美洲</a></li>
	      <li><a href="#">欧洲</a></li>
	      <li><a href="#">大洋洲</a></li>
	      <li><a href="#">非洲</a></li>
	      <li><a href="#">其他</a></li>
	    </ul>
	      <ul class="area-content">
	        <li class="item item-show after-clear">
	          <dl>
	            <dt>热门城市</dt>
	            <dd class="after-clear" id="m_hotsite_city_destination">
	                <!-- <a href="hotel-list.html?countryCode=AT&amp;cityCode=Fiss">费斯</a> -->
	            </dd>
	            <dl>
	              <dt>热门国家</dt>
	              <dd class="after-clear" id="m_hotsite_country_destination"></dd>
	            </dl>
	          </dl>
	        </li>
	        <li class="item after-clear" id="m_destinationContinent_domestic"></li>
	        <li class="item after-clear" id="m_destinationContinent_Asia"></li>
	        <li class="item after-clear" id="m_destinationContinent_Americas"></li>
	        <li class="item after-clear" id="m_destinationContinent_Europe"></li>
	        <li class="item after-clear" id="m_destinationContinent_Australasia"></li>
	        <li class="item after-clear" id="m_destinationContinent_Africa"></li>
	        <li class="item after-clear">
	            <dl>
	                <dt>印度洋</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_IndianOcean"></div>
	            <dl>
	                <dt>加勒比海地区</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_Caribbean"></div>
	            <dl>
	                <dt>中东</dt>
	            </dl>
	            <div class="after-clear" id="m_searchContinent_MiddleEast"></div>
	        </li>
	      </ul>
	  </div>
	</section>
  </div>
</template>
<script>
export default {
  name: 'header',
  data () {
    return {
      PcHotelsMenu: false,
      MobileHotelsMenu: false,
      MobileMenuOpen: false,
      LXRequred: false,
      Europe: '',
      Asian: '',
      IndianOcean: '',
      Australasia: '',
      Americas: '',
      Caribbean: '',
      Africa: '',
      MiddleEast: ''
    }
  },
  mounted: function () {
    this.$http.jsonp('http://www.slhhotels.cn/trail-api/v1/destination/countries/LX', {}, {
      headers: {
      },
      emulateJSON: true
    }).then(function (response) {
      this.LXRequred = !this.LXRequred
      this.Europe = response.body[4].countries
      this.Asian = response.body[3].countries
      this.IndianOcean = response.body[2].countries
      this.Australasia = response.body[5].countries
      this.Americas = response.body[1].countries
      this.Caribbean = response.body[7].countries
      this.Africa = response.body[6].countries
      this.MiddleEast = response.body[0].countries
      console.log('response', response.body)
    }, function (response) {
      // 这里是处理错误的回调
      console.log(response)
    })
  },
  methods: {
    openMobileMenu () {
      if (this.MobileHotelsMenu && this.MobileMenuOpen) {
        this.MobileHotelsMenu = !this.MobileHotelsMenu
      } else {
        this.MobileMenuOpen = !this.MobileMenuOpen
      }
    },
    mobilehotelsMenuOpen () {
      this.MobileHotelsMenu = !this.MobileHotelsMenu
    },
    pchotelsMenuOpen () {
      this.PcHotelsMenu = !this.PcHotelsMenu
    },
    pchotelsMenuClose () {
      this.PcHotelsMenu = !this.PcHotelsMenu
    }
  }
}
</script>
